<h1 class="demo-title">list</h1>

<h3>单行列表</h3>
<div class="demo-panel">
    <ul  class="list-single">
        <li class="border-t">面板</li>
        <li class="border-t">圆角头像</li>
        <li class="border-t">徽章</li>
        <li class="border-t">红点</li>
        <li class="border-t">角标</li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul  class="list-single"&gt;
    &lt;li class="border-t"&gt;面板&lt;/li&gt;
    &lt;li class="border-t"&gt;圆角头像&lt;/li&gt;
    &lt;li class="border-t"&gt;徽章&lt;/li&gt;
    &lt;li class="border-t"&gt;红点&lt;/li&gt;
    &lt;li class="border-t"&gt;角标&lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
</div>

<h3>图文混排</h3>
<div class="demo-panel">
    <ul class="list-default">
        <li class="border-t whitespace-h">
            <div class="list-cover-img ">
                <img width="100%" height="100%" src="http://pic2.yxt.com/mall/course/2015122517518170.jpg?imageview2/1/w/120/h/68" />
            </div>
            <div class="list-info row-flex row-flex-ver">
                <p class="nowrap col-flex-1">这是标题</p>
                <div class="col-flex-1">这是第二行</div>
                <div class="col-flex-1">这是第三行</div>
            </div>
        </li>
        <li class="border-t whitespace-h">
            <div class="list-cover-img ">
                <img width="100%" height="100%" src="http://pic2.yxt.com/mall/course/2015122517518170.jpg?imageview2/1/w/120/h/68" />
            </div>
            <div class="list-info row-flex row-flex-ver">
                <p class="nowrap col-flex-1">这是标题</p>
                <div class="col-flex-1">这是第二行</div>
                <div class="col-flex-1">这是第三行</div>
            </div>
        </li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="list-default"&gt;
    &lt;li class="border-t whitespace-h"&gt;
        &lt;div class="list-cover-img"&gt;
            &lt;img width="100%" height="100%" src="http://pic2.yxt.com/mall/
                    course/2015122517518170.jpg?imageview2/1/w/120/h/68" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info row-flex row-flex-ver"&gt;
            &lt;p class="nowrap col-flex-1"&gt;这是标题&lt;/p&gt;
            &lt;div class="col-flex-1"&gt;这是第二行&lt;/div&gt;
            &lt;div class="col-flex-1"&gt;这是第三行&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="border-t whitespace-h"&gt;
        &lt;div class="list-cover-img"&gt;
            &lt;img width="100%" height="100%" src="http://pic2.yxt.com/mall
                    /course/2015122517518170.jpg?imageview2/1/w/120/h/68" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info row-flex row-flex-ver"&gt;
            &lt;p class="nowrap col-flex-1"&gt;这是标题&lt;/p&gt;
            &lt;div class="col-flex-1"&gt;这是第二行&lt;/div&gt;
            &lt;div class="col-flex-1"&gt;这是第三行&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
</div>
<h3>右边有内容的列表</h3>
<div class="demo-panel">
    <ul class="list-single">
        <li class="clearfix nowrap border-t">
            <div class="pull-right whitespace-r">
                <span class="whitespace-l"><div class="badge-char badge-red">New</div></span>
            </div>
            111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </li>
        <li class="clearfix nowrap border-t">
            <div class="pull-right whitespace-h">
                <span><div class="badge badge-red">123</div></span>
            </div>
            111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="list-single"&gt;
    &lt;li class="clearfix nowrap border-t"&gt;
        &lt;div class="pull-right whitespace-r"&gt;
            &lt;span class="whitespace-l"&gt;右侧内容&lt;/span&gt;
        &lt;/div&gt;
        11111111111111111111111111111111111111111111111
        1111111111111111111111111111111111111111111111111111111111
    &lt;/li&gt;
    &lt;li class="clearfix nowrap border-t"&gt;
        &lt;div class="pull-right whitespace-h"&gt;
            &lt;span&gt;右侧内容&lt;/span&gt;
        &lt;/div&gt;
        1111111111111111111111111111111111111111111111111111
        11111111111111111111111111111111111111111111111111111
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
    <h3>带箭头链接</h3>
    <div class="demo-panel">
    <ul class="list-link whitespace-l">
        <li class="border-t">
            <div class="list-info">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1" width="56" height="56" />
            </div>
        </li>
        <li class="border-t">
            <div class="list-info">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1" width="80" height="80" />
            </div>
        </li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="list-link whitespace-l"&gt;
    &lt;li class="border-t"&gt;
        &lt;div class="list-info"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1" width="56" height="56" /&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="border-t"&gt;
        &lt;div class="list-info"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1" width="80" height="80" /&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
</div>
    <h3>图文列表带头像</h3>
    <ul class="list-ui-common">
        <li class="border-t">
            <div class="list-img">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" />
            </div>
            <div class="list-info row-flex row-flex-ver">
                <div class="nowrap">这是标题加nowrap自动截取</div>
                <div class="nowrap">这是内容</div>
            </div>
        </li>
        <li class="border-t">
            <div class="list-img">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" />
            </div>
            <div class="list-info row-flex row-flex-ver">
                <div class="nowrap">这是标题加nowrap自动截取</div>
                <div class="nowrap">这是内容</div>
            </div>
        </li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="list-ui-common"&gt;
    &lt;li class="border-t"&gt;
        &lt;div class="list-img"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info row-flex row-flex-ver"&gt;
            &lt;div class="nowrap"&gt;这是标题加nowrap自动截取&lt;/div&gt;
            &lt;div class="nowrap"&gt;这是内容&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="border-t"&gt;
        &lt;div class="list-img"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info row-flex row-flex-ver"&gt;
            &lt;div class="nowrap"&gt;这是标题加nowrap自动截取&lt;/div&gt;
            &lt;div class="nowrap"&gt;这是内容&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
    <br>
    <br>
    <ul class="list-ui-common list-link">
        <li>
            <div class="list-img">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" />
            </div>
            <div class="list-info border-t">
                <p>这是标题</p>
            </div>
        </li>
        <li>
            <div class="list-img">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" />
            </div>
            <div class="list-info border-t">
                <p>这是标题</p>
                <div>这是内容这是内容</div>
            </div>
        </li>
        <li>
            <div class="list-img">
                <img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" />
            </div>
            <div class="list-info border-t">
                <p>这是标题</p>
                <div>这是内容这是内容</div>
            </div>
        </li>
    </ul>
<pre lang-prism class="language-html">
<code class="language-html">
&lt;ul class="list-ui-common list-link"&gt;
    &lt;li&gt;
        &lt;div class="list-img"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info border-t"&gt;
            &lt;p&gt;这是标题&lt;/p&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div class="list-img"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info border-t"&gt;
            &lt;p&gt;这是标题&lt;/p&gt;
            &lt;div&gt;这是内容这是内容&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;div class="list-img"&gt;
            &lt;img src="http://doc2.yunxuetang.cn/media/userfiles/userphotos/huiz/201512/cba05d800a5b45e58b265ce7b1033dbb.png?imageView2/0/w/120/h/120/format/jpg/interlace/1"  width="50" height="50" /&gt;
        &lt;/div&gt;
        &lt;div class="list-info border-t"&gt;
            &lt;p&gt;这是标题&lt;/p&gt;
            &lt;div&gt;这是内容这是内容&lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code>
</pre>
    <h3>三段列表</h3>
    <ul class="list-default">
        <li>
            <div class="whitespace-r">1</div>
            <div class="whitespace-r">
                <img src="http://m2.yunxuetang.cn/stylesheets/images/filetype/format_video.png" width="37" height="44" />
            </div>
            <div class="col-flex-1">
                <h5>全面管理你的压力</h5>
                <div><span class="text-grey text-size-12">学分:0.2/0.9</span></div>
            </div>
        </li>
    </ul>
</div>
